<template>
  <div id="index">
    <el-container>
      <el-header style="
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 999;
          padding: 0;
        ">
        <menu-bar :transparency="top"></menu-bar>
      </el-header>
      <el-main style="padding: 0">

        <!--        轮播图-->
        <div class="home-middle-top">
          <el-carousel trigger="click" :height="bannerHeight + 'px'">

            <el-carousel-item v-for="item in imgUrls" :key="item.id">
              <el-row>
                <el-col :span="24" class="banner_img">
                  <img ref="bannerHeight" style="object-fit: cover;" :src="item.imageUrl" class="bannerImg"
                       @load="imgLoad"/>
                </el-col>
              </el-row>
            </el-carousel-item>
          </el-carousel>
        </div>


        <!--       民族详情-->

        <div class="ethnic" style="max-width: 1400px;padding-top: 60px;padding-left: 10%;padding-right: 10%">
          <div style="margin: 40px 0;padding-bottom: 20px">
            <el-divider>
              <p style="font-weight: 500; font-size: 28px">
                民族展示
              </p>
            </el-divider>
          </div>
          <el-row :gutter="50">
            <el-col :span="6" v-for="item in nation" :key="item.id">
              <el-tooltip class="item" effect="light" :content="item.name" placement="top-start">
                <el-card :body-style="{ padding: '0px' }" style="width: 95%; margin: 0 auto 20px 0;"
                         shadow="hover">
                  <div style="height: 300px; ">
                    <!--          图片-->
                    <a :href="'/ethnic/synopsis?nid=' + item.id">
                      <img :src="item.image" width="100%" class="image"/>
                    </a>
                  </div>
                </el-card>
              </el-tooltip>

            </el-col>
          </el-row>
        </div>


        <!--        宣传片-->
        <div style="max-width: 1400px;padding-top: 40px;padding-left: 10%;padding-right: 10%">
          <div style="margin: 40px 0;">
            <el-divider>
              <p style="font-weight: 500; font-size: 28px">
                精彩瞬间
              </p>
            </el-divider>
          </div>
        </div>
        <div class="video" style="padding-top: 50px;padding-left:20%">
          <video autoplay loop muted id="bgvid">
            <source src="../assets/56.mp4" type="video/mp4"/>
          </video>

        </div>


      </el-main>

      <!-- 页脚 -->
      <el-footer style="padding: 0">
        <!--        <page-footer></page-footer>-->
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import MenuBar from '@/components/MenuBar.vue'
import PageFooter from '@/components/PageFooter.vue'
import ArticleCard from '@/components/ArticleCard.vue'

export default {
  components: {MenuBar, PageFooter, ArticleCard},
  data() {
    return {
      show3: false,
      userId: "",
      articles: [],
      showIndex: true,
      bannerHeight: '',
      lis: [
        "11",
        "22"
      ],
      nation: [],

      imgUrls: [{
        id: 1,
        imageUrl: "https://img1.artron.net/auction/2016/art509607/d/art5096070514.jpg",
      },
        {
          id: 2,
          imageUrl: "https://img1.artron.net/artist/A0007672/TRT0000500166.jpg",
        },{
          id: 3,
          imageUrl: "https://ts1.cn.mm.bing.net/th/id/R-C.1dfe5ab89ddb8773e606c28747abe141?rik=8MsFPkNiMog0GQ&riu=http%3a%2f%2fwww.rmhb.com.cn%2fwh%2f201711%2fW020171117532918371305.jpg&ehk=CcNdRMQNRjno9jfQr6QSlqmUY0MvQGnwaCrZ0Vj5R9k%3d&risl=&pid=ImgRaw&r=0",
      },],
      top: 0
    }
  },
  created() {
    this.getAllNation()
  },
  methods: {
    getAllNation() {
      this.axios.get("/nation/get-all-list").then(({data}) => {
        if (data.state == 20000) {
          this.nation = data.data;
        } else {
          this.$message.error(data.message);
        }

      })
    },

    // 控制轮播图高度
    imgLoad() {
      this.$nextTick(() => {
        this.bannerHeight = this.$refs.bannerHeight[0].height
      })
    },

  },
  mounted() {
    this.imgLoad()
    window.addEventListener('resize', () => {
      this.bannerHeight = this.$refs.bannerHeight[0].height
      this.imgLoad()
    }),
        // 获取滚动条距离顶部的位置
        window.addEventListener('scroll', () => {
          let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
          if (top <= 300) {
            this.top = top / 300;
          } else {
            this.top = 1;
          }

        })
  }

}
</script>

<style>

.el-card {
  box-shadow: none;
}


.el-card:hover {
  box-shadow: 0 1px 6px rgba(193, 192, 192, 0.93);
  border-color: #eee;
  transition: all 0.2s ease-in-out;
}

.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409EFF;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}

.home-middle-top {
  height: 42%;
  overflow: hidden;
  /*margin-bottom: 10vh;*/
  background-color: rgb(255, 255, 255);
}

.home-middle-bottom {
  height: 52%;
  margin-top: 3%;
}

.home-middle-top img {
  display: block;
  width: 100%;
  height: 100%;
}

.bannerImg {
  position: relative;
  left: 50%;
  transform: translate(-50%);
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.nation {
  padding-left: 20%;
  width: 1000px;
}


.image {
  width: 100%;
  display: block;
}

.image:hover {
  background-color: #222222;
}

* {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB W3", "Hiragino Sans GB",
  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
